/** 
 * 默认css
 * by lovefc
 **/

/* 渐隐 */
@keyframes fadeOut {
    0% {
        opacity: 1
    }

    80% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

/* 延迟上拉 */
@keyframes pullUp {
    0% {
        opacity: 1;
        transform: translateY(0);
        offset: 1
    }

    80% {
        opacity: 1;
        transform: translateY(0);
        offset: 1
    }

    100% {
        opacity: 0;
        transform: translateY(-100%);
        offset: 0
    }
}

/* 延迟下拉 */
@keyframes pullDown {
    0% {
        opacity: 1;
        transform: translateY(0);
        offset: 1
    }

    80% {
        opacity: 1;
        transform: translateY(0);
        offset: 1
    }

    100% {
        opacity: 0;
        transform: translateY(100%);
        offset: 0
    }
}

/** 默认加载样式 **/

#fc_loader {
  width: 100%;
  height: calc(100%);
  background-image: radial-gradient(circle farthest-corner at center, #FFF 0%, #F8F8F8 100%);
  opacity: 1;
  filter: alpha(opacity=100);
  overflow: visible;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9998;
}
.fc_load_inner {
  position: fixed;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}
.fc_inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.fc_inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #70e1f5;
}
.fc_inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #ffd194;
}
.fc_inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #e4aaaa;
}
@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}